<template>
  选择操作的对象：{{name}}
  <div class="echarts-chart"></div>
</template>
<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
export default {
  name: 'EchartsRelationGraph',
  setup() {
    const name = ref('');
    const chartInstance = ref(null);
    onMounted(() => {
      chartInstance.value = echarts.init(document.querySelector('.echarts-chart'));
      const options = {
        title: {
          text: '我的线状图测试'
        },
        series: [{
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 700
          },
          data: [{
            name: '我是孙悟空',
            label: {
              show: true
            },
            emphasis: {
              focus: false
            }
          }, {
            name: '我是唐僧',
            label: {
              show: true
            },
          }, {
            name: '我是沙僧',
            label: {
              show: true
            },
          }, {
            name: '我是猪八戒',
            label: {
              show: true
            },
          }, {
            name: '我是被暴打的妖怪',
            label: {
              show: true
            },
          }],
          links: [{
            source: '我是唐僧',
            target: '我是孙悟空'
          }, {
            source: '我是唐僧',
            target: '我是沙僧'
          }, {
            source: '我是唐僧',
            target: '我是猪八戒'
          }, {
            source: '我是孙悟空',
            target: '我是被暴打的妖怪'
          }]
        }]
      };
      chartInstance.value.setOption(options);
      //点击事件
      chartInstance.value.on('click', (params) => {
        if (params.dataType === 'node') {
          // alert(`点击的事件对象: ${params.data.name}`);
          name.value = params.data.name;
        }
      });
    });

    return {
      chartInstance,
      name
    };
  }
};
</script>
<style scoped>
.echarts-chart {
  width: 100%;
  height: 400px;
}
</style>